<template>
  <div class="info-container">
    <a-form-model class="form" ref="form" :model="form" :rules="formRules">
      <a-card title="角色信息" :bordered="false">
        <a-row :gutter="40">
          <a-col :span="24">
            {{ checkedKeys }}
            <a-form-model-item label="角色权限" prop="role">
              <a-tree class="tree" checkStrictly v-model="checkedKeys" :expanded-keys="expandedKeys" :replace-fields="replaceFields"
                :tree-data="treeData" checkable @check="onChange" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form-model>
    <div class="bottom-group">
      <a-button style="margin-right: 12px" @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="submitLoading" @click="handleConfirm">完成</a-button>
    </div>
  </div>
</template>

<script>
import * as Ajax from '@/api/system';
export default {
  data() {
    const valiRole = (rule, value, callback) => {
      if (this.checkedKeys.length > 0) {
        callback();
      } else {
        callback(new Error('请至少选择一条'));
      }
    };
    return {
      submitLoading: false,
      form: {},
      formRules: {
        role: { required: true, validator: valiRole, trigger: ['blur', 'change'] },
      },
      checkedKeys: [],
      treeData: [],
      replaceFields: {
        key: 'id',
      },
      expandedKeys: [],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getMenuTree();
  },
  methods: {
    onChange(e) {
      this.checkedKeys = e.checked
      this.$refs.form.validateField('role');
    },
    getMenuTree() {
      Ajax.getRoleTree(this.id).then((res) => {
        if (res.success) {
          this.treeData = Array.isArray(res.data) ? res.data : [];
          this.checkedKeys = this.getAllSelectedIds(this.treeData);
          // this.checkedKeys = this.treeData.filter((it) => it.selected).map((it) => it.id);
          this.expandedKeys = this.treeData.map((it) => it.id);
        }
      });
    },
    getAllSelectedIds(nodes) {  
    let ids = [];  
  
    function traverse(nodes) {  
        nodes.forEach(node => {  
            if (node.selected) {  
                ids.push(node.id);  
            }  
            if (node.children && node.children.length > 0) {  
                traverse(node.children);  
            }  
        });  
    }  
  
    traverse(nodes);  
    return ids;  
} ,
  
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            roleId: this.id,
            menuIdList: this.checkedKeys,
          };
          this.submitLoading = true;
          Ajax.editRoleList(params)
            .then((res) => {
              if (res.success) {
                this.$message.success('编辑成功');
                this.handleCancel();
              }
            })
            .finally(() => {
              this.submitLoading = false;
            });
        }
      });
    },
    handleCancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.info-container {
  position: relative;
  margin-bottom: 84px;
}

:deep(.ant-card) {
  margin-bottom: 20px;
}

:deep(.ant-row) {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.tree {
  overflow: hidden;
  padding: 12px 0;
}

:deep(.ant-tree > li ul) {
  white-space: normal;
}

:deep(.ant-tree > li li) {
  // display: inline-block;
  // margin-bottom: 2px;
}

:deep(.ant-tree > li) {
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.ant-tree > li > span > .ant-tree-title) {
  font-weight: bold;
}

.bottom-group {
  width: calc(100% - 240px);
  height: 64px;
  background: #fff;
  box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.15);
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
}
</style>
